<template>
  <div class="form_item-json_param">
    <template v-if="is_info">
      <template v-for="(v,key) in this_value">
        <el-form-item :label="label_map[key]||key" :label-width="label_width(label_map[key]||key)" :style="form_item_style(input_component)" style="margin-bottom: 0;">
          <div style="width: 100%;">
            <component :is="input_component.type" name="" :value="v" v-bind="bind_param(input_component)" :is_info="true"></component>
          </div>
        </el-form-item>
      </template>
    </template>
    <template v-else>
      <input type="hidden" :name="name" :value="value">
      <checkbox :value="key_arr.join(',')" :config="key_options" @change="change_checkbox"></checkbox>
      <template v-for="(key,i) in key_arr">
        <el-form-item :label="label_map[key]" :label-width="label_width(label_map[key])" :style="form_item_style(input_component)">
          <div style="width: 100%;">
            <component :is="input_component.type" name="" v-model:value="this_value[key]" v-bind="bind_param(input_component)" @change="update_value"></component>
          </div>
        </el-form-item>
      </template>
    </template>
  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {decode_config} from "@/js/s94_tool.js";

export default {
  _title_: '自选参数',
  _can_config_: true,
  _can_form_param_: true,
  name: "json_param_checkbox",
  props: ['name', 'value', 'config', 'is_info', 'btns', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: {},

      key_options: [],
      label_map: {},
      key_arr: [],
      input_component: {type:"text_one", config:"", inline:1},
    }
  },
  methods: {
    change_checkbox(val){
      let key_arr = val ? val.split(',') : [];
      for (let i = 0; i < key_arr.length;) {
        let k = key_arr[i];
        if (k in this.label_map){
          i++;
        }else {
          key_arr.splice(i,1);
        }
      }
      this.key_arr = key_arr;
      let value_arr = this.this_value;
      Object.keys(value_arr).forEach(k=>{
        if (!~key_arr.indexOf(k)) delete value_arr[k];
      })
      key_arr.forEach((k,i)=>{
        value_arr[k] = value_arr[k] || "";
      })
      this.this_value = value_arr;
      this.update_value();
    },
    form_item_style(row){
      let res = (row.style && typeof row.style === 'object') ? row.style : {};
      if (row.block) res['display'] = 'flex';
      if (row.inline) res['display'] = 'inline-flex';
      return res;
    },
    display_config(){
      let config = {};
      if (this.config) {
        try {
          config = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
        } catch (e) {}
        this.key_options = config.key_options ? decode_config(config.key_options) : [];
        this.label_map = {};
        s94Mjs.eachloop(this.key_options, "children", (row,i)=>{
          this.label_map[row.value] = row.content;
          return true;
        })
        this.input_component = config.input || {type:"text_one", config:""};
      }else {
        this.key_options = [];
        this.label_map = {};
        this.input_component = {type:"text_one", config:""};
      }
    },
    display_value(){
      try {
        this.this_value = this.value ? JSON.parse(this.value) : {};
      } catch (e) {}
      if (!this.this_value || typeof this.this_value !== 'object'){
        this.this_value = {};
      }
      this.key_arr = Object.keys(this.this_value);
    },
    update_value(){
      let v = JSON.stringify(this.this_value);
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    label_width(label){
      return (label.length*14+26)+'px';
    },
  },
  computed:{

  },
  watch: {
    value(v, oldV){
      if (!this.need_display) return;
      this.display_value();
    },
    config(v, oldV){
      this.display_config();
    },
  },
  mounted() {
    this.display_config();
    this.display_value();
  }
}
</script>

<style scoped>

</style>